<template>
  <!-- 设备清洁记录 -->
  <baseslot>
    <template v-slot:content>
      <div class="insect-alert-main">
        <div class="zh-myside">
          <myside @peststation="peststation" />
        </div>
        <div class="alert-main-right">
          <div style="display:flex;margin-bottom:10px;">
            <el-date-picker
              v-model="searchList.dateList"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            />
            <div class="search-but" @click="search">
            </div>
          </div>
          <div class="main-right-table">
            <el-table
              highlight-current-row
              :data="tableData"
              stripe
              border
              height="88%"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column prop="pestlei" label="最新清洁时间" />
              <el-table-column prop="cleanTime" label="上次清洁时间" />
            </el-table>
            <Pagination
              :page-size="pageSize"
              :current-page="currentPage"
              :total-size="totalSize"
              @changePageSize="changePageSize"
              @changeCurrentPage="changeCurrentPage"
            />
          </div>
        </div>
      </div></template>
  </baseslot>
</template>
<script>
import Pagination from "@/components/Pagination"
import baseslot from "@/components/BaseMainSlot/baseone.vue"
import nowpagereq from "@/api/digital-production/pest-management/insect-alert"
import myside from "../components/side.vue"
import { mymixin } from "@/utils/mixins"
export default {
  components: {
    Pagination,
    baseslot,
    myside
  },
  mixins: [mymixin],
  data() {
    return {
      value2: [],
      // 虫害信息表格
      tableData: [
        { namezz: 1 },
        { namezz: 1 },
        { namezz: 1 },
        { namezz: 1 },
        { namezz: 1 },
        { namezz: 1 },
        { namezz: 1 },
        { namezz: 1 },
        { namezz: 1 },
        { namezz: 1 }
      ],
      searchList: {},
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      insectDeviceId: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  mounted() {
    // this.getTableDataList()
  },
  methods: {
    // 表格查询
    getTableDataList() {
      this.loading = true;
      this.tableData = []
      let params = {}
      params = {
        page: this.currentPage,
        size: this.pageSize,
        value: this.insectDeviceId

      }
      // let startTime = ''
      // let endTime = ''
      if (this.searchList.dateList !== undefined) {
        params.startTime = this.searchList.dateList[0]
        params.endTime = this.searchList.dateList[1]
      }
      // params = {
      //   page: this.currentPage,
      //   size: this.pageSize,
      //   condition: [{ paramName: 'insectDeviceId', value: this.insectDeviceId, startTime: startTime, endTime: endTime, sign: 'equals' }]
      // }
      nowpagereq.getCleanRecord(params).then(
        res => {
          if (res.code === 1) {
            // this.$message.success('查询成功')
            this.loading = false;
            let data = res.data;
            // 赋值总条数
            this.totalSize = data.total;
            // 赋值数组
            if (data.deviceCleanPageList.list !== undefined) {
              this.tableData = data.deviceCleanPageList.list;
            } else {
              this.tableData = []
              this.addblankmet()
              this.resetActionBar();
            }
          } else {
            this.$message.error('查询失败')
          }
        }
      )
    },
    peststation(e) {
      // console.log(e)
      this.insectDeviceId = e.insectDeviceId
      this.getTableDataList()
    },
    search() {
      this.currentPage = 1;
      // console.log(this.searchList)
      this.getTableDataList();
    },
    // 点击页码
    changePageSize(e) {
      this.pageSize = e
      this.getTableDataList();
      // 获取表格数据包
    },
    changeCurrentPage(e) {
      this.currentPage = e
      this.getTableDataList();
    }
  }
}
</script>
<style lang="scss" scoped>
.insect-alert-main{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .search-but{
      cursor: pointer;
      width: 80px;
      height: 40px;
      background-image: url("~@/assets/action-bar-icon/search.png");
      background-size: 80px 40px;
      background-repeat: no-repeat;
      background-position: center;
      margin-left: 10px;
    }
  .zh-myside{
    width: 230px;
    height: calc(100% - 0px);
    // overflow: auto;
    background-color: rgba(0,72,90,.7);
  }
  .alert-main-right{
    width: calc(100% - 240px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .main-right-table{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
